<template>
	<view class="tabbar">
		<view class="tabbar-item" v-for="(item, index) in tabbarList.list" :key="index" @click="clickTabbar(item)">{{ item.text }}</view>
	</view>
</template>

<script>
export default{
	name:'bro-tabbar',
	props:{
		'tabbar-list':{
			type:Object,
			default(){
				return{
					list:[]
				}
			}
		}
	},
	methods:{
		clickTabbar(item){
			this.$emit('click-tabbar',item)
		}
	}
}
</script>

<style lang="scss" scoped>
	.tabbar {
		background-color: var(--app-tabbar-bg-color);
		color: var(--app-tabbar-text-color);
		border-top: solid 1px var(--app-tabbar-border-color);
		height: 100%;
		display: flex;
		justify-content: space-around;
		.tabbar-item {
			width: 250rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
